<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>resizeable</title>
    <style>
        body {
            margin: 0px;
            padding: 50px;
            font-size: 14px;
            color: #333;
        }

        .panel {
            width: 400px;
            height: 240px;
            border: 1px solid #ccc;
            position: relative;
        }

        .panel .title {
            background-color: #eee;
            text-align: center;
            line-height: 30px;
        }

        .ui-resizable-r {
            position: absolute;
            right: 0px;
            top: 0px;
            width: 10px;
            height: 100%;
            /* background-color: green; */
            cursor: e-resize;
        }

        .ui-resizable-b {
            position: absolute;
            right: 0px;
            bottom: 0px;
            width: 100%;
            height: 10px;
            /* background-color: blue; */
            cursor: s-resize;
        }

        .ui-resizable-rb {
            position: absolute;
            right: 0px;
            bottom: 0px;
            width: 20px;
            height: 20px;
            /* background-color: red; */
            cursor: nw-resize;
        }
    </style>
</head>

<body>
    <div class="panel" id="ui-resizable">
        <div class="title">Resizable</div>
        <!-- <div class="></div>
        <div class="ui-resizeable-b"></div>
        <div class="ui-resizeable-rb"></div> -->
    </div>
    <script>
        (function () {
            var m_panel, m_ctrl, m_type;
            var moving = 0,
                m_start_x = 0,
                m_to_x = 0,
                m_start_y = 0,
                m_to_y = 0;

            function on_mousedown(e, panel, ctrl, type) {
                var e = e || window.event;
                m_start_x = e.pageX - ctrl.offsetLeft;
                m_start_y = e.pageY - ctrl.offsetTop;

                m_panel = panel;
                m_ctrl = ctrl;
                m_type = type;

                moving = setInterval(on_move, 10);

            }
            function on_move() {
                if (moving) {
                    var to_x = m_to_x - m_start_x;
                    var to_y = m_to_y - m_start_y;

                    var min_left = m_panel.offsetLeft;
                    var min_top = m_panel.offsetTop;

                    to_x = Math.max(to_x, min_left);
                    to_y = Math.max(to_y, min_top);

                    switch (m_type) {
                        case 'r':
                            m_ctrl.style.left = to_x + "px";
                            m_panel.style.width = to_x + 10 + "px";
                            break;
                        case 'b':
                            m_ctrl.style.top = to_y + "px";
                            m_panel.style.height = to_y + 10 + "px";
                            break;
                        case 'rb':
                            m_ctrl.style.left = to_x + "px";
                            m_panel.style.width = to_x + 20 + "px";

                            m_ctrl.style.top = to_y + "px";
                            m_panel.style.height = to_y + 20 + "px";
                            break;
                    }
                }
            }
            document.onmousemove = function (e) {
                var e = e || window.event;
                m_to_x = e.pageX;
                m_to_y = e.pageY;
                // console.log(m_to_x);
            }
            document.onmouseup = function () {
                clearInterval(moving);
                moving = 0;
                var cls = document.getElementsByClassName('ui-resizeable-ctrl');

                for (var i = 0; i < cls.length; i++) {
                    cls[i].style.left = "";
                    cls[i].style.top = "";
                }
            }
            function Resizable(panel_id) {
                var panel = document.getElementById(panel_id);

                var r = document.createElement('div');
                var b = document.createElement("div");
                var rb = document.createElement("div");

                r.class = r.className = 'ui-resizable-r ui-resizeable-ctrl';
                b.class = b.className = 'ui-resizable-b ui-resizeable-ctrl';
                rb.class = rb.className = 'ui-resizable-rb ui-resizeable-ctrl';

                panel.append(r);
                panel.append(b);
                panel.append(rb);

                r.addEventListener("mousedown", function (e) {
                    on_mousedown(e, panel, r, 'r');
                });
                b.addEventListener("mousedown", function (e) {
                    on_mousedown(e, panel, b, 'b');
                });
                rb.addEventListener("mousedown", function (e) {
                    on_mousedown(e, panel, rb, 'rb');
                });
            }
            Resizable('ui-resizable');


        })();
    </script>
</body>

</html>